<template>
  <dialog-component
      :is-show="state.isShow"
      :is-view="state.isView"
      :loading="state.loading"
      :title="title"
      icon="el-icon-edit-outline"
      @close="close"
      @save="save"
  >
    <template #body>
      <el-form label-position="right" ref="dataFormRef" :rules="state.rules" label-width="110px" :model="state.dataForm">
            <el-form-item label="字典名称" prop="dictName">
              <el-input :readonly="state.isView" v-model="state.dataForm.dictName" placeholder="字典名称"></el-input>
            </el-form-item>
            <el-form-item label="字典编号" prop="dictCode">
              <el-input :readonly="state.isView" v-model="state.dataForm.dictCode" placeholder="字典编号"></el-input>
            </el-form-item>

          <el-button @click="add" type="primary">新增</el-button>
          <el-table
              :data="state.dataForm.dictList"
              style="width: 100%">
            <el-table-column
                label="字典子项编号"
                header-align="center"
                align="center"
               >
              <template #default="scope">
                <el-form-item  :prop="`dictList.${scope.$index}.code`" :rules="state.rules.code">
                  <el-input @input="aa(scope)" v-model="scope.row.code" placeholder="子项编号" ></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
                label="字典子项名称"
                header-align="center"
                align="center"
               >
              <template #default="scope">
                <el-form-item  prop="name">
                  <el-input v-model="scope.row.name" placeholder="子项名称"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column width="80" label="操作">
              <template #default="scope">
                  <el-button
                      size="mini"
                      type="danger"
                      style="margin-bottom: 22px"
                      @click="del(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
      </el-form>
    </template>
  </dialog-component>
</template>

<script>
import {reactive,ref } from 'vue'
import dialogComponent from '@/components/dialog/dialog-component'
import {VueUtil} from "@/util";
import {NuoDictController} from "@/actions/controller";
export default {
  name: "dict-code-add-update",
  components:{
    dialogComponent
  },
  emits:['reload'],
  setup(props,parent){
    //只读数据
    const  readOnlyData  = reactive({

    })
    //数据变量
    let data = {
      dataForm:  {
        dictName: '',
        dictCode: '',
        dictList: []
      },
      isView: true,
      isShow: false,
      loading: false,
      rules: {
        dictName:[
          { required: true, message: '字典名称不能为空', trigger: 'blur' },
          { min: 1, max: 64, message: '字典名称长度为1 - 64个字符', trigger: 'blur' }
        ],
        dictCode:[
          { required: true, message: '字典编号不能为空', trigger: 'blur' },
          { min: 1, max: 64, message: '字典编号长度为1 - 64个字符', trigger: 'blur' }
        ],
        name:[
          { required: true, message: '字典子项名称不能为空', trigger: 'blur' },
          { min: 1, max: 64, message: '字典子项名称长度为1 - 64个字符', trigger: 'blur' }
        ],
        code:[
          { required: true, message: '字典子项编号不能为空', trigger: 'blur' },
          { min: 1, max: 64, message: '字典子项编号长度为1 - 64个字符', trigger: 'blur' }
        ]
      }
    }
    let state = reactive({...data})
    //标题
    let title = ref('')
    //表单dom
    const dataFormRef = ref(null)
    //初始化函数
    const init = (setTitle,dataForm,setIsView = false)=>{
      title.value = setTitle
      state.isView = setIsView
      if(dataForm){
        Object.assign(state.dataForm,dataForm)
      }
      state.isShow = true
    }
    //关闭
    const close = (isReload)=>{
      Object.assign(state,{
        dataForm:  {
          dictName: '',
          dictCode: '',
          dictList: []
        },
        isView: true,
        isShow: false,
        loading: false
      })
      if(isReload){
        parent.emit("reload")
      }
    }
    //删除子项
    const del = (index)=>{
      state.dataForm.dictList.splice(index,1)
    }
    //新增子项
    const add = ()=>{
      console.log(state)
      state.dataForm.dictList.push({
        code: '',
        name: ''
      })
    }
    //保存字典
    const save =()=>{
      VueUtil().formVerifyV3(dataFormRef.value,()=>{
        state.loading = true
        VueUtil().ajax(NuoDictController.saveDict,state.dataForm).then(res=>{
          VueUtil().hint(res.message)
          close(true)
          state.loading = false
        }).catch(()=>{
          state.loading = false
        })
      })

    }
    const aa=(value)=>{
     console.log(value)
    }
    return{
      init,
      title,
      state,
      close,
      save,
      readOnlyData,
      dataFormRef,
      del,
      add,
      aa
    }
  }
}
</script>

<style scoped>

</style>
